<template>
    <div class="ordersearch">
        <div class="all">
            <p>
                <van-icon name="arrow-left" @click="$router.back()" />
                <van-search class="search" v-model="searchokey" show-action placeholder="搜索我的订单" @search="searchorder">
                    <template #action>
                        <div @click="searchorder">搜索</div>
                    </template>
                </van-search>
            </p>
            <div class="body">
                <template v-for="item in searchResult">
                    <van-card :num="item.productSum" :price="item.productPrice" :title="item.productTitle"
                        :thumb="item.orderImg">
                        <template #footer>
                            <van-button size="normal" round type="primary">去支付</van-button>
                        </template>
                    </van-card>
                </template>
            </div>
        </div>

    </div>
</template>

<script>
import { Toast } from 'vant';
import orders from '@/api/orders';
export default {
    data() {
        return {
            searchokey: '',
            // orderlist: [
            //     {
            //         status_id: 1,
            //         orderid: "630147774005",
            //         order_shop: "七鲜",
            //         product_price: 59.80,
            //         order_price: 59.80,
            //         product_des: "京览 晋州长城 羊脂秋月净重5斤",
            //         order_img: "https://img1.baidu.com/it/u=319510654,3848329935&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800",
            //         product_sum: 1
            //     },
            //     {
            //         status_id: 1,
            //         orderid: "630147774005",
            //         order_shop: "七鲜",
            //         product_price: 35.00,
            //         order_price: 35.00,
            //         product_des: "小林制药洗衣液120ml",
            //         order_img: "https://img2.baidu.com/it/u=2864525257,2661889927&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800",
            //         product_sum: 1
            //     },
            //     {
            //         status_id: 2,
            //         orderid: "640153470468",
            //         order_shop: "七鲜",
            //         product_price: 108.00,
            //         order_price: 108.00,
            //         product_des: "恒都 牛尾段1kg",
            //         order_img: "https://img0.baidu.com/it/u=2720509232,3171562940&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800",
            //         product_sum: 1
            //     },
            //     {
            //         status_id: 3,
            //         orderid: "650153528125",
            //         order_shop: "七鲜",
            //         product_price: 49.90,
            //         order_price: 99.80,
            //         product_des: "西州蜜瓜哈密瓜2粒装",
            //         order_img: "https://img0.baidu.com/it/u=160733136,1430664583&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800",
            //         product_sum: 1
            //     },
            //     {
            //         status_id: 4,
            //         orderid: " 620153653396",
            //         order_shop: "七鲜",
            //         product_price: 69.80,
            //         order_price: 139.60,
            //         product_des: "京览 河北晋州特级甜鸭梨10斤",
            //         order_img: "https://img1.baidu.com/it/u=2048211795,2883360916&fm=253&fmt=auto&app=138&f=JPEG?w=752&h=500",
            //         product_sum: 1
            //     }
            // ],
            // orderlist:[],
            searchResult: [],
            orderlist: [],
        };
    },
    mounted() {
        this.getOrderList()
    },
    methods: {
        async getOrderList() {
            let res = await orders.getOrderList()
            console.log(res);
            this.orderlist = res.data;
        },
        searchorder() {
            // console.log(111);
            console.log(this.searchokey);
            if (this.searchokey == "") {
                Toast('请输入商品名称');
            } else {
                this.searchResult = this.orderlist.filter(item => {
                    return item.productTitle.includes(this.searchokey)

                })
            }

        }
    },

}
</script>

<style lang="scss" scoped>
.ordersearch {
    width: 100%;
    height: 100%;
    overflow: hidden;
    .all{
        // display: flex;
        // flex-direction: column;

        p {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        height: 53px;
        .search {
            width: 84%;
            border-radius: 200px;
        }
    }
    .body {
        flex: 1;
    }
    }
}
</style>